<template>
    <div class="count" ref="count">
        <canvas id="canvas" ref="canvas"></canvas>
        <svg class="icon animated infinite jello delay-2s">
            <use xlink:href="#icon-zu"></use>
        </svg>
        <div class="hint">红包开启中</div>
    </div>
</template>

<script>
    export default {
        name: "count",
        data(){
          return {
              canvas:{
                  canvas:null,
                  context:null
              }
          }
        },
        props:{
            totalCount:{
                type:Number,
                default:20
            },
            nowCount:{
                type:Number,
                default:0
            },
            reset:{
                type:Boolean,
                default:true
            }
        },
        mounted() {
            this.initCanvas();
            //this.drawCount();
        },
        watch:{
            nowCount(value){
                this.drawCount();
                if(value === 0) this.canvas.context.clearRect(0,0,this.canvas.canvas.width,this.canvas.canvas.height);
            }
        },
        methods:{
            //初始化canvas倒计时
            initCanvas(){
                this.canvas.canvas = this.$refs.canvas;
                this.canvas.context = this.canvas.canvas.getContext('2d');
                let width = this.$refs.count.getBoundingClientRect().width;
                let height = this.$refs.count.getBoundingClientRect().height;
                this.canvas.canvas.style.width = width + 'px';
                this.canvas.canvas.style.height = height + 'px';
                if(window.devicePixelRatio){
                    this.canvas.canvas.width = width*window.devicePixelRatio;
                    this.canvas.canvas.height = height*window.devicePixelRatio;
                    this.canvas.context.lineWidth = 4;
                    this.canvas.context.strokeStyle  = 'gold';
                }
            },
            //画弧线
            drawCount(){
                this.canvas.context.beginPath();
                let eAngle  = 2*Math.PI/this.totalCount*this.nowCount;
                this.canvas.context.arc(this.canvas.canvas.width/2,this.canvas.canvas.height/2,this.canvas.canvas.width/2-3,0,eAngle);
                this.canvas.context.stroke();
            }
        }
    }
</script>

<style scoped lang="less" src="./count.less"></style>
